<template>
  <b-page class="bind-qywx" :loading="loading">
    <a-row class="bind-qywx-title">
      <a-col>绑定企业微信</a-col>
    </a-row>
    <a-row type="flex" class="bind-qywx-state d-aic">
      <a-col span="18">
        <a-row v-if="isBind" class="flex">
          <a-col>
            <img class="qywx-img" :src="companyData.corpSquareLogoUrl">
          </a-col>
          <a-col class="ml-20">
            <a-row>
              <a-col class="qywx-state-show">企业微信@{{ companyData.corpName }}</a-col>
            </a-row>
            <a-row style="margin-top: 7px">
              <a-col class="qywx-state-desc-show">已接入</a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row v-else class="flex">
          <a-col>
            <img class="qywx-img" src="../../assets/qywx.png">
          </a-col>
          <a-col class="ml-20">
            <a-row>
              <a-col class="qywx-state-show">未绑定</a-col>
            </a-row>
            <a-row style="margin-top: 7px">
              <a-col class="qywx-state-desc-show">点击右侧按钮绑定企业微信</a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
      <a-col span="6">
        <transition name="fade-transform" mode="out-in">
          <span v-if="isBind" class="bind-link-btn">已绑定</span>
          <a v-else :href="linkBindWx" target="_blank" class="bind-link-btn">绑定</a>
        </transition>

      </a-col>
    </a-row>

    <a-row class="qywx-desc-img-wrap">
      <a-col span="24">
        <img class="qywx-desc-img" src="../../assets/jrtj.jpg">
      </a-col>
    </a-row>
  </b-page>
</template>

<script>
  import BButton from '../../components/b-button'
  import { checkCp, bindQywx, getQwBindUrl } from '../../../api/common'
  import BLoading from '../../components/b-loading'
  // import storage from 'store'
  // import { ACCESS_TOKEN } from '../../../store/mutation-types'

  export default {
    name: 'BindQywx',
    components: { BLoading, BButton },
    data () {
      return {
        isBind: false,
        linkBindWx: '',
        companyData: {},
        loading: false
      }
    },
    computed: {
      qwUserId () {
        return this.$store.state.user.info.qwUserId
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        // 获取页面参数，判断是不是重定向进入该页，如果是，进行绑定请求，不是，检查企业微信绑定情况
        const paramsPage = location.search
        if (paramsPage) {
          this.bindQywx(paramsPage)
        } else {
          this.checkBind()
        }
      },
      /**
       * 如果没绑定，获取绑定链接，然后构造绑定请求
       */
      checkBind () {
        this.loading = true
        checkCp({ qwUserId: this.qwUserId }).then(res => {
          if (res.id) {
            this.companyData = Object.assign({}, res)
            setTimeout(() => {
              this.isBind = true
            }, 100)
          }
            this.loading = false
          // 获取绑定链接
          this.getUrl(this.qwUserId)
          // const redirectUri = encodeURIComponent(location.href + '?bingState=ing')
          // const token = storage.get(ACCESS_TOKEN)
          // this.linkBindWx = 'https://lb.bihuo8.com/api/rwb/qwAuth/authUrl?access_token=' + token + '&qwUserId=' + qwUserId + '&redirectUri=' + redirectUri
        }).catch(() => {
          this.loading = false
        })
      },
      getUrl (qwUserId) {
        getQwBindUrl({ redirectUrl: location.href + '?bingState=ing', qwUserId: qwUserId }).then(res => {
          this.linkBindWx = res
        })
      },
      mockBind () {
        this.isBind = true
        this.companyData = Object.assign({}, {
          name: '企业微信@长沙晨智信息科技有限公司'
        })
        this.$message.success(`绑定成功`)
      },
      bindQywx (params) {
        const qwUserId = params.state
        const authCode = params.auth_code
        bindQywx(qwUserId, authCode).then(res => {
          this.$message.success(`绑定成功`)
        }).catch(() => {
          this.$message.success(`绑定出现错误，请稍后再试`)
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .bind-qywx {
    position: relative;
    padding: 0 32px;

    .bind-qywx-title {
      font-size: 20px;
      color: #262626;
    }

    .bind-qywx-state {
      padding: 32px 0;
      border-bottom: 1px solid #F0F0F0;
    }

    .qywx-img {
      width: 32px;
      height: 32px;
    }

    .qywx-state-show {
      color: #1890FF;
      font-size: 14px;
    }

    .qywx-state-desc-show {
      color: #8C8C8C;
      font-size: 14px;
    }

    .qywx-desc-img-wrap {
      margin-top: 52px;
    }

    .qywx-desc-img {
      width: 586px;
      height: 306px;
    }

    .bind-link-btn {
      width: 146px;
      height: 42px;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      background-color: #1890FF;
      color: white;
    }
  }
</style>
